<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="comment.js"></script>
    <script>
        //匹配空格的正则表达式
        var rex = /^\s*$/;

        function $(id) {
            return document.getElementById(id);
        }

        window.onload = function () {
            show();
        }

        function show() {
            var str = "";
            commentArr.forEach(n => {
                str += `<tr><th>${n.name}</th><th>${n.comment}</th></tr>`;
            });
            $("data").innerHTML = str;
        }

        function submit() {
            // console.log($("name").value + "   " + $("comment").value);
            //为什么用$("name").value) ！=null和"$("name").value) ！=""不可以
            // if ($("name").value == null || $("name").value == "") { //不能匹配空格
            //     alert("请输入内容！");
            // } else {
            //     commentArr.push({name: $("name").value, comment: $("comment").value});
            //     $("name").value = "";
            //     $("comment").value = "";
            //     show();
            // }
            if (rex.test($("name").value) & rex.test($("comment").value)) {
                alert("请输入内容！");
            } else {
                commentArr.push({name: $("name").value, comment: $("comment").value});
                $("name").value = "";
                $("comment").value = "";
                show();
            }
        }


    </script>
</head>
<body>
<table border="1" cellspacing="0" width="50%">
    <thead>
    <tr>
        <th>评价人</th>
        <th>评价</th>
    </tr>
    </thead>

    <tbody id="data"></tbody>
</table>

请输入评价人<input type="text" id="name"><br>
请输入评价 <input type="text" id="comment">
<input type="button" value="评价" onclick="submit()">

</body>
</html>